<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui/css/layui.css" media="all">
</head>
<body>
<!--搜索框-->
<form class="layui-form layui-form-pane" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">筛选数据</label>
            <div class="layui-input-inline">
                <input type="text" name="title" lay-verify="title" id="comReload" autocomplete="off" placeholder="请输入查询条件" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-block">
                <input type="text" id="startDate" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-block">
                <input type="text"  id="endDate" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">社团等级</label>
            <div class="layui-input-inline">
                <select  id="lvSearch" lay-search="">
                    <option value="">社团的星级</option>
                    <option value="1">一星级</option>
                    <option value="2">二星级</option>
                    <option value="3">三星级</option>
                    <option value="4">四星级</option>
                    <option value="5">五星级</option>
                    <option value="6">六星级</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">社团类别</label>
            <div class="layui-input-inline">
                <select  id="typeSearch" lay-search="">
                    <option value="">社团的类别</option>
                    <option value="1">学术科技类</option>
                    <option value="2">志愿公益类</option>
                    <option value="3">文体艺术类</option>
                    <option value="4">创新创业类</option>
                    <option value="5">语言文学类</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline" >
                <select id="statusSearch"  lay-search="">
                    <option value="">请选择状态</option>
                    <option value="0">启用</option>
                    <option value="1">禁用</option>
                </select>
            </div>
        </div>

        <div class="layui-inline" id="searchContent">
            <button type="button" class="layui-btn" data-type="reload">查询</button>
            <button type="button" class="layui-btn" data-method="addCommunity">新增社团</button>
        </div>
    </div>
</form>

<table id="comList" lay-filter="comList" ></table>

<div id="comUpdate" style="display: none">
    <form class="layui-form layui-form-pane" id="comForm" lay-filter="comForm">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">社团名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" autocomplete="off" placeholder="请输入社团名称" lay-verify="required"
                       lay-reqtext="社团名称必填" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">社团类别</label>
            <div class="layui-input-inline">
                <select name="type" lay-verify="required" lay-search="">
                    <option value="">社团的类别</option>
                    <option value="1">学术科技类</option>
                    <option value="2">志愿公益类</option>
                    <option value="3">文体艺术类</option>
                    <option value="4">创新创业类</option>
                    <option value="5">语言文学类</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">挂靠单位</label>
            <div class="layui-input-inline" lay-filter="group">
                <select name="faculty" lay-verify="required" id="gkdw"  lay-search="">

                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">指导教师</label>
            <div class="layui-input-inline">
                <input type="text" name="guideTeacher" autocomplete="off" placeholder="指导教师" lay-verify="required"
                       lay-reqtext="指导教师必填" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">社团星级</label>
            <div class="layui-input-inline">
                <select name="lv" lay-verify="required" lay-search="">
                    <option value="">社团的星级</option>
                    <option value="1">一星级</option>
                    <option value="2">二星级</option>
                    <option value="3">三星级</option>
                    <option value="4">四星级</option>
                    <option value="5">五星级</option>
                    <option value="6">六星级</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">创建时间</label>
            <div class="layui-input-inline">
                <input type="text" name="createDatetime" lay-verify="date"  autocomplete="off" id="date" placeholder="yyyy-MM-dd HH:mm:ss"  class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">社团描述</label>
            <div class="layui-input-block">
                <textarea placeholder="请简单描述一下该社团" name="description" class="layui-textarea"></textarea>
            </div>
        </div>
    </form>
</div>

<div id="comAdd" style="display: none">
    <form class="layui-form layui-form-pane" id="comAddForm" lay-filter="comAddForm">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">社团名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" autocomplete="off" placeholder="请输入社团名称" lay-verify="required"
                       lay-reqtext="社团名称必填" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">社团类别</label>
            <div class="layui-input-inline">
                <select name="type" lay-verify="required" lay-search="">
                    <option value="">社团的类别</option>
                    <option value="1">学术科技类</option>
                    <option value="2">志愿公益类</option>
                    <option value="3">文体艺术类</option>
                    <option value="4">创新创业类</option>
                    <option value="5">语言文学类</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">挂靠单位</label>
            <div class="layui-input-inline" lay-filter="groupadd">
                <select name="faculty" lay-verify="required" id="gkdwadd"  lay-search="">

                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">指导教师</label>
            <div class="layui-input-inline">
                <input type="text" name="guideTeacher" autocomplete="off" placeholder="指导教师" lay-verify="required"
                       lay-reqtext="指导教师必填" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">社团星级</label>
            <div class="layui-input-inline">
                <select name="lv" lay-verify="required" lay-search="">
                    <option value="">社团的星级</option>
                    <option value="1">一星级</option>
                    <option value="2">二星级</option>
                    <option value="3">三星级</option>
                    <option value="4">四星级</option>
                    <option value="5">五星级</option>
                    <option value="6">六星级</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">创建时间</label>
            <div class="layui-input-inline">
                <input type="text" name="createDatetime" lay-verify="date"  autocomplete="off" id="cdate" placeholder="yyyy-MM-dd"  class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">社团描述</label>
            <div class="layui-input-block">
                <textarea placeholder="请简单描述一下该社团" name="description" class="layui-textarea"></textarea>
            </div>
        </div>
    </form>
</div>
<script type="text/html" id="comBar">
    {{#  if(d.status == 1){ }}
    <a class="layui-btn layui-btn-xs" lay-event="open">启用</a>
    {{#  } }}
    {{#  if(d.status == 0){ }}
    <a class="layui-btn layui-btn-xs" lay-event="close">禁用</a>
    {{#  } }}
    <a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>
</script>
<script src="../lib/layui/layui.js" charset="utf-8"></script>
<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>

<script>
    layui.use(['table','form','layer','laydate'], function(){
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        //获取社团数据
        table.render({
            elem: '#comList'
            ,height: 440
            ,url: '/community'
            ,request:{
                pageName: 'pageNumber'
                ,limitName: 'pageSize'
            }
            ,response: {
                countName: 'total'
            }
            ,cellMinWidth: 60
            ,page: true //开启分页
            ,totalRow:true
            ,even:true
            ,skin:'line'
            ,limit: 10
            ,cols: [[ //表头
                {field: 'id', hide:'true'}
                ,{field: 'name', title: '社团名称', align:'center'}
                ,{field: 'lv', title: '社团等级', align:'center',templet:'#lv',sort:true}
                ,{field: 'description', title: '社团描述',align:'center'}
                ,{field: 'faculty', title: '挂靠学院', align:'center'}
                ,{field: 'guideTeacher', title: '指导老师',align:'center'}
                ,{field: 'type', title: '社团类别',align:'center',templet:'#type'}
                ,{field: 'createDatetime', title: '创建时间', align:'center',sort:true}
                ,{field: 'status', title: '状态', sort: true,align:'center',templet:'#status'}
                ,{title:'操作',toolbar:'#comBar',width:160}
            ]],
            id:'tableReload'
        });
        //监听工具条
        table.on('tool(comList)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event;
            var tr = obj.tr;
            if(layEvent === 'open'){ //启用
                //启用数据
                data.status = '0';//修改状态为启用
                var rowData = JSON.stringify(data);
                $.ajax({
                    url:'/community',
                    type:'put',
                    data:rowData,
                    dataType:'json',
                    contentType:'application/json',
                    success:function (res) {
                        if (res.state == true) {//启用成功
                            layer.msg('启用成功', {icon:1,time:1000},function(){
                                layer.load(2);
                                setTimeout('window.location.reload()',200);
                            });
                        }else {//启用失败
                            layer.msg('启用失败，请联系管理员', {icon:3,time:1000},function(){
                                layer.load(2);
                                setTimeout('window.location.reload()',1000);
                            });
                        }
                    }
                });
            }else if(layEvent === 'close'){//禁用
                //禁用数据
                data.status = '1';//修改状态为禁用
                var rowData = JSON.stringify(data);
                $.ajax({
                   url:'/community',
                   type:'put',
                   data:rowData,
                   dataType:'json',
                   contentType:'application/json',
                   success:function (res) {
                       if (res.state == true) {//禁用成功
                           layer.msg('禁用成功', {icon:1,time:1000},function(){
                               setTimeout('window.location.reload()',200);
                               layer.load(2);
                           });
                       }else {//禁用失败
                           layer.msg('禁用失败，请联系管理员', {icon:3,time:1000},function(){
                               layer.load(2);
                               setTimeout('window.location.reload()',1000);
                           });
                       }
                   }
                });
            }else if(layEvent === 'delete'){//删除数据
                //禁用数据
                $.ajax({
                    url:'/community/'+data.id,
                    type:'delete',
                    dataType:'json',
                    success:function (res) {
                        if (res.state == true) {//删除成功
                            layer.msg('删除成功', {icon:1,time:1000},function(){
                                setTimeout('window.location.reload()',200);
                                layer.load(2);
                            });
                        }else {//禁用失败
                            layer.msg(res.msg, {icon:3,time:1000},function(){
                                layer.load(2);
                                setTimeout('window.location.reload()',1000);
                            });
                        }
                    }
                });
            } else if(layEvent === 'update'){ //编辑
                var data = obj.data;
                //加载挂靠单位
                $.ajax({
                    type:'get',
                    url:'/classList?isFaculty=true',
                    dataType:'json',
                    success:function (res) {
                        if (res.state == true){
                            //获取数据成功
                            var option = "<option value=''>社团挂靠的单位</option>";
                            $("#gkdw").html("");
                            for(var i=0;i<res.data.length;i++){
                                option +="<option value='"+res.data[i].faculty+"'>"+res.data[i].faculty+"</option>";
                            }
                            $("#gkdw").append(option);
                            form.render();
                        } else {
                            layer.msg(res.msg);
                        }
                    }
                });
                //回显数据
                form.val("comForm",{
                    "id":data.id,
                    "name":data.name,
                    "type":data.type,
                    "faculty":data.faculty,
                    "guideTeacher":data.guideTeacher,
                    "lv":data.lv,
                    "createDatetime":data.createDatetime,
                    "description":data.description
                });
                layer.open({
                    type: 1,
                    title:["修改社团信息", 'font-size:14px; font-weight: 700;'],
                    btn:['确认修改','取消修改'],
                    btnAlign: 'c',
                    content: $('#comUpdate'),
                    area: ['700px','500px'],
                    closeBtn:2,
                    yes: function(index, layero){
                        //按钮【按钮一】的回调
                        var comData = $("#comForm").serialize();
                        $.ajax({
                            type:'post',
                            url:'/community',
                            data:comData,
                            dataType:'json',
                            success:function (res) {
                                if (res.state == true){
                                    layer.msg('修改成功', {icon:1,time:1000},function(){
                                        //关闭弹框
                                        layer.load(2);
                                        layer.close(index);
                                        setTimeout('window.location.reload()',500);
                                    });
                                }else {
                                    layer.msg(res.msg, {icon:3,time:1000});
                                }
                            }
                        });
                    },
                    btn2:function (index,layero) {
                        //取消修改，关闭弹框
                        layer.close(index);
                    }
                });
            }
        });
        //表格数据筛选
        var $ = layui.$, active = {
            reload: function(){
                var comReload = $('#comReload');
                var startDate = $('#startDate');
                var endDate = $('#endDate');
                var lvSearch = $('#lvSearch');
                var typeSearch = $('#typeSearch');
                var statusSearch = $('#statusSearch');
                //执行重载
                table.reload('tableReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        searchKey: comReload.val(),
                        startTime: startDate.val(),
                        endTime: endDate.val(),
                        lv: lvSearch.val(),
                        type: typeSearch.val(),
                        status: statusSearch.val(),
                    }
                }, 'data');
            },
            addCommunity: function () {//添加活动
                //加载挂靠单位
                $.ajax({
                    type:'get',
                    url:'/classList?isFaculty=true',
                    dataType:'json',
                    success:function (res) {
                        if (res.state == true){
                            //获取数据成功
                            var option = "<option value=''>社团挂靠的单位</option>";
                            $("#gkdwadd").html("");
                            for(var i=0;i<res.data.length;i++){
                                option +="<option value='"+res.data[i].faculty+"'>"+res.data[i].faculty+"</option>";
                            }
                            $("#gkdwadd").append(option);
                            // form.render('select','group');
                            form.render();
                        } else {
                            layer.msg(res.msg);
                        }
                    }
                });
                layer.open({
                    type: 1,
                    title:["新增社团", 'font-size:14px; font-weight: 700;'],
                    btn:['确认新增','取消新增'],
                    btnAlign: 'c',
                    content: $('#comAdd'),
                    area: ['700px','500px'],
                    closeBtn:2,
                    yes: function(index, layero){
                        var comData = $("#comAddForm").serialize();
                        $.ajax({
                            type:'post',
                            url:'/community',
                            data:comData,
                            dataType:'json',
                            success:function (res) {
                                if (res.state == true){
                                    layer.msg('新增成功', {icon:1,time:1000},function(){
                                        //关闭弹框
                                        layer.load(2);
                                        layer.close(index);
                                        setTimeout('window.location.reload()',500);
                                    });
                                }else {
                                    layer.msg(res.msg, {icon:3,time:1000});
                                }
                            }
                        });
                    },
                    btn2:function (index,layero) {
                        //取消修改，关闭弹框
                        layer.close(index);
                    }
                });
            },
        };

        $('#searchContent .layui-btn').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
        $('#searchContent .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //日期时间选择器
        laydate.render({
            elem: '#date'
            ,type: 'date'
        });
        laydate.render({
            elem: '#cdate'
            ,type: 'date'
        });
        laydate.render({
            elem: '#startDate'
            ,type: 'date'
        });
        laydate.render({
            elem: '#endDate'
            ,type: 'date'
        });
    });
</script>

<!--翻译-->
<script type="text/html" id="lv">
    {{#  if(d.lv == 1){ }}
        一星级
    {{#  } else if(d.lv == 2 ) { }}
        二星级
    {{#  }else if(d.lv == 3 ) { }}
        三星级
    {{#  }else if(d.lv == 4 ) { }}
        四星级
    {{#  }else if(d.lv == 5 ) { }}
        五星级
    {{#  }else if(d.lv == 6 ) { }}
        六星级
    {{#  }
    }}
</script>
<script type="text/html" id="status">
    {{#  if(d.status == 0){ }}
        启用
    {{#  } else if(d.status == 1 ) { }}
        禁用
    {{#  }
    }}
</script>
<script type="text/html" id="type">
    {{#  if(d.type == 1){ }}
    学术科技类
    {{#  } else if(d.type == 2 ) { }}
    志愿公益类
    {{#  }else if(d.type == 3 ) { }}
    文体艺术类
    {{#  }else if(d.type == 4 ) { }}
    创新创业类
    {{#  }else if(d.type == 5 ) { }}
    语言文学类
    {{#  }
    }}
</script>
<script type="text/html" id="faculty">
    {{#  if(d.faculty == 1){ }}
    计信院
    {{#  } else if(d.faculty == 2 ) { }}
    软件院
    {{#  }else if(d.faculty == 3 ) { }}
    园林院
    {{#  }else if(d.faculty == 4 ) { }}
    国土院
    {{#  }else if(d.faculty == 5 ) { }}
    人文院
    {{#  } else if(d.faculty == 6 ) { }}
    马克思学院
    {{#  }else if(d.faculty == 7 ) { }}
    动科院
    {{#  }else if(d.faculty == 8 ) { }}
    生工院
    {{#  }else if(d.faculty == 9 ) { }}
    经管院
    {{#  }else if(d.faculty == 10 ) { }}
    食品院
    {{#  }else if(d.faculty == 11) { }}
    农学院
    {{#  }else if(d.faculty == 12 ) { }}
    校统战部
    {{#  }else if(d.faculty == 13 ) { }}
    工学院
    {{#  } else if(d.faculty == 14 ) { }}
    校档案馆
    {{#  }else if(d.faculty == 15 ) { }}
    军体部
    {{#  }else if(d.faculty == 16 ) { }}
    校纪委
    {{#  }else if(d.faculty == 17 ) { }}
    学工处
    {{#  }else if(d.faculty == 18 ) { }}
    校图书馆
    {{#  }else if(d.faculty == 19 ) { }}
    招生就业处
    {{#  }else if(d.faculty == 20 ) { }}
    职师院
    {{#  }else if(d.faculty == 21 ) { }}
    外语院
    {{#  }else if(d.faculty == 22 ) { }}
    宣传部
    {{#  }
    }}
</script>

<!--将表单参数转换为json格式-->
<script type="text/javascript">
    $.fn.serializeJson = function () {
        var serializeObj = {};
        var array = this.serializeArray();
        $.each(array, function () {
            if (serializeObj[this.name] !== undefined) {
                if (!serializeObj[this.name].push) {
                    serializeObj[this.name] = [serializeObj[this.name]];
                }
                serializeObj[this.name].push(this.value || '');
            } else {
                serializeObj[this.name] = this.value || '';
            }
        });
        return serializeObj;
    };
</script>
</body>
</html>